<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left">
        <el-input v-model="search_val" placeholder="角色名称" clearable @clear="clearNickname" size="small"
          style="width: 220px;">
          <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchButton">
          </el-button>
        </el-input>
      </div>
      <div class="header_right">
        <el-button size="small" style="margin-left: 15px;" icon="el-icon-plus" @click="roleAddBtn">
          新增
        </el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" height="calc(100% - 65px)" class="table" :header-cell-style="headerStyle">
        <el-table-column align="center" label="序号" type="index" width="80" height="30"></el-table-column>
        <el-table-column align="center" prop="name" label="角色名称" min-width="150"></el-table-column>
        <el-table-column align="center" prop="description" label="角色描述" min-width="120"></el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" min-width="155"></el-table-column>

        <el-table-column align="center" prop="updateTime" label="更新时间" min-width="155"></el-table-column>
        <el-table-column align="center" prop="management" label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
              <i @click="editClick(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
              <i @click="deleteRole(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="RoleList" class="pagination" />
      <!-- <pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :page="page"
                :limit="limit" :total="total"></pagination> -->

      <!-- 新增角色弹出框开始 -->
      <AddRole ref="refAddRole" :treeData='treeData'></AddRole>

      <!-- 修改弹框 -->
      <EditRole ref="refEditRole" :treeData="treeData" :editRowInfo="editRowInfo"
        :defaultCheckedKeys="defaultCheckedKeys"></EditRole>

    </div>
  </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import {
  getRoleList,
  getPermissionAll,
  delRole,
  getRolePermisison,
} from "@api/api.js";
import AddRole from "./components/AddRole.vue"; //新增
import EditRole from "./components/EditRole.vue"; //修改
import { transTree } from "@/utils/trans-tree";

export default {
  name: "role",
  components: {
    Pagination,
    AddRole,
    EditRole,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      loadingSearch: false, //查询按钮loading
      search_val: "",
      page: 1,
      limit: 10,
      total: 100,
      tableData: [],
      treeData: [], //树形表单列表
      editRowInfo: "", //修改那行的数据
      defaultCheckedKeys: "", //行中的权限数组id
    };
  },
  mounted() {},
  methods: {
    // 清空
    clearNickname() {
      this.page = 1;
      this.limit = 10;
      this.RoleList();
    },
    // 角色新增弹框按钮
    async roleAddBtn() {
      await this.getPermissionAll();
      this.$refs.refAddRole.dialogVisible = true;
    },
    // 获取所有权限
    async getPermissionAll() {
      let res = await getPermissionAll();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.treeData = transTree(res.data.data);
    },
    // 点击查询
    async searchButton() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.RoleList();
      this.loadingSearch = false;
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    // 点击修改按钮
    async editClick(row) {
      await this.getPermissionAll();
      this.editRowInfo = JSON.parse(JSON.stringify(row)); //深拷贝当前行数据，解除修改数据与列表数据双向绑定
      const res = await getRolePermisison(this.editRowInfo.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.defaultCheckedKeys = [];
      let perTree = transTree(res.data.data.permissions); //第一步转为树形列表
      //第二步抽取最后子节点id
      var lastchildren = [];
      function forxh(list) {
        for (var i = 0; i < list.length; i++) {
          var chlist = list[i];
          if (chlist.children && chlist.children.length > 0) {
            forxh(chlist.children);
          } else {
            lastchildren.push(chlist.id);
          }
        }
      }
      forxh(perTree);
      this.defaultCheckedKeys = lastchildren;
      this.defaultCheckedKeys = [...new Set(this.defaultCheckedKeys)]; //数组去重
      this.$refs.refEditRole.dialogVisible = true;
    },
    // 删除角色
    async deleteRole(id) {
      const result = await this.$confirm(
        "此操作将永久删除该角色, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      let res = await delRole(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除角色成功");
      this.page = 1;
      this.RoleList();
    },
    // 获取角色列表
    async RoleList() {
      let res = await getRoleList(this.page, this.limit, {
        name: this.search_val,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.rows;
      this.total = res.data.total;
    },
  },
  created() {
    this.RoleList();
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");
::v-deep .cell {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
 ::v-deep .el-button--small {
    background: #7367f0;
    color: #fff;
    border: none;
}
</style>